import React from 'react';
import './threeD_text.css';

const images = [
  "//s.ibaotu.com/editor/img/3dWords/3D-14.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-50.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-31.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-45.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-47.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-54.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-29.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-11.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-49.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-53.png",
   "//s.ibaotu.com/editor/img/3dWords/3D-29.png",
    "//s.ibaotu.com/editor/img/3dWords/3D-31.png",
  "//s.ibaotu.com/editor/img/3dWords/3D-45.png",
   "//s.ibaotu.com/editor/img/3dWords/3D-14.png",
];

const threeD_text: React.FC = () => {
  const handleDragStart = (event: React.DragEvent<HTMLImageElement>, src: string) => {
    event.dataTransfer.setData('text/plain', src);
  };

  return (
    <div className='Text'>
    
      <div className='Text_botton'>
        {images.map((src, index) => (
          <span key={index}>
            <img 
              src={src} 
              alt={`Image ${index}`} 
              draggable 
              onDragStart={(event) => handleDragStart(event, src)} 
            />
          </span>
        ))}
      </div>
    </div>
  );
}

export default threeD_text;
